<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">导航-1</a></li>
            <li><a href="#">导航-2</a></li>
            <li><a href="#">导航-3</a></li>
            <li><a href="#">导航-4</a></li>
            <li><a href="#">导航-5</a></li>
            <li><a href="#">导航-6</a></li>
        </ul>
    </nav>
    <div id="d1" class="parent">
        <p>
            <h1>message</h1>
            <ol>
                <li><a href="#">div-1</a></li>
                <li><a href="#">div-2</a></li>
                <li><a href="#">div-3</a></li>
                <li><a href="#">div-4</a></li>
                <li><a href="#">div-5</a></li>
            </ol>
        </p>
    </div>
    <!-- 通常建议进入js，作为body的最后一个子元素 -->
    <script>
        //$合法的函数名（自定义）
        let $=function(id){
            return document.getElementById(id);
        }
        let div=$('d1');
        //获得父节点
        let parent= div.parentNode;
        console.log(parent);
        //获子节的
        let childs=div.childNodes;
        console.log(childs);
        //上一个兄弟节点
        let prev=div.previousSibling.previousSibling;
        console.log(prev);
        //下一个兄弟节点
        let next=div.nextSibling.nextSibling;
        console.log(next);

    </script>
</body>
</html>